<script setup>
import {ElMessage} from 'element-plus'
import * as rrweb from "rrweb";
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";


let stopFn, events = []
const replayer = ref(null);
const value = ref('')

const handleStart = () => {
  stopFn = rrweb.record({
    //12秒后停止页面的录制，如果想一直录得话可以去掉。
    emit(event) {
      // localStorage.setItem('event', event)
      events.push(event)
    },
  });
  ElMessage({
    message: "开启视频录制",
    type: "success",
  });
}

const handleStop = () => {
  ElMessage({
    message: "3秒后结束视频录制",
    type: "warning",
  });
  if (stopFn) {
    setTimeout(() => {
      ElMessage({
        message: "已结束视频录制",
        type: "error",
      });
      stopFn()

    }, 3000)
  }

}

const handleRecord = () => {
  console.log(JSON.stringify(events))
  replayer.value = new rrwebPlayer({
    target: document.getElementById("playback"), // 可以自定义 DOM 元素
    props: {
      events: events,
      speedOption: [1, 2, 5, 10],
    },
  });
}





</script>

<template>
  <div class="page_auto_warp">
    <div class="rrweb-warp">
      <div class="rrweb-title">rrweb 案例</div>
      <el-button @click="handleStart()">开始录制</el-button>
      <el-button @click="handleStop()">结束录制</el-button>
      <el-button @click="handleRecord()">播放回放</el-button>

      <el-input v-model="value"></el-input>
      {{value}}


      <div id="playback"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page_auto_warp {
  color: #181818;
  overflow-y: auto;

  .rrweb-warp {
    width: 100%;
    height: 2000px;
    background-color: rgba(28, 166, 109, 0.97);
    padding: 10px;


    .rrweb-title {
      font-size: 24px;
      font-weight: bold;
      line-height: 48px;
    }

    #playback {
      margin-top: 50px;
    }
  }
}
</style>
